﻿@page "/DateRangePicker/Day-Span"

@using Syncfusion.Blazor.Calendars
@using System

@inherits SampleBaseComponent;

<SampleDescription>
   <p>In the Blazor [Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) example, your date range selection is restricted to select <code>minimum</code> five days and <code>maximum</code> ten days.</p>
</SampleDescription>
<ActionDescription>
    <p>DateRangePicker has <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_MinDays' target='_blank'> MinDays</a> and <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_MaxDays' target='_blank'> MaxDays</a> supports to force the user to select the minimum and maximum number of days in the range. Only the values in this range will be enabled.</p>
    <p>For example, in some hotel booking website, we need to book rooms that includes packages like minimum 3 days to maximum 5 days. For this scenario this feature can be used.</p>
    <p>More information on the DateRangePicker MinDays/MaxDays support can be found in the <a href='https://blazor.syncfusion.com/documentation/daterangepicker/range-restriction/#range-span' target='_blank'>documentation section</a></p>.
</ActionDescription>

<div class=" col-lg-12 control-section">
    <div id="wrapper" class="daterangepicker-section">
        <div id="daterangepicker-control">
            <SfDateRangePicker TValue="DateTime?" Placeholder="Select a Range" MinDays=5 MaxDays=10></SfDateRangePicker>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 70px;
    }
</style>